import styles from './index.module.scss'
import bgImage from '../../assets/images/login/bgImage.svg'
import { Form, Input, Checkbox, Button } from 'antd';
import { LockOutlined, UserOutlined, EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons';
import { useDispatch } from 'react-redux';
import { setToken } from '@/store/modules/user.js';
import { apiLogin } from '@/api/user.js';
import { useNavigate } from 'react-router-dom'
import CryptoJS from 'crypto-js'

function Login() {
  const dispatch = useDispatch();
  const navigate = useNavigate()
  const loginHandle = async (form) => {
    const res = await apiLogin({...form, password: CryptoJS.MD5(form.password).toString()})
    if (res.code === 200) {
      dispatch(setToken(res.token));
    }
  }

  return (
    <div className={styles.login}>
      <div className={styles.left}>
        <img className={styles.svg} src={bgImage} alt="" srcSet="" />
      </div>
      <div className={styles.right}>
        <div className={styles['login-form']}>
          <div className={styles.title}>您好！欢迎使用协同作业管理平台</div>
          <div className={styles.line}></div>
          <Form
            name="login_form"
            initialValues={{remember: true}}
            autoComplete="off"
            onFinish={loginHandle}
          >
            <Form.Item name="username" rules={[{ required: true, message: '请输入用户名'}]}>
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" allowClear/>
            </Form.Item>

            <Form.Item name="password" rules={[ { required: true, message: '请输入密码'}]}>
              <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)} placeholder="请输入密码" allowClear/>
            </Form.Item>

            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住我</Checkbox>
              </Form.Item>
              {/* <a className={styles["login-form-forgot"]} href="">忘记密码</a> */}
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" className={styles["login-form-button"]}> 登 录 </Button>
              或 <a onClick={()=>{navigate('/register')}}>立即注册!</a>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  )
}

export { Login as default }